<template>

	<div>
		<el-form :inline="true" :model="queryForm" ref="queryForm" size="small" class="demo-form-inline">
			<el-form-item label="部门名称" prop="departName">
				<el-input v-model="queryForm.departName" placeholder="部门名称"></el-input>
			</el-form-item>

			<el-form-item label="部门状态" prop="departState">
				<el-select v-model="queryForm.departState" placeholder="部门状态">
					<el-option label="正常" value="0"></el-option>
					<el-option label="停用" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onQuerySubmit">搜索</el-button>
				<el-button type="warning" @click="resetForm()">重置</el-button>
			</el-form-item>
		</el-form>

		<div>
			<el-button type="primary" icon="el-icon-sort" size="mini" @click="handleAdd()" plain>新增</el-button>
			<el-button type="success" icon="el-icon-sort" size="mini" :disabled="butStatus"  @click="handleEdit()" plain>修改</el-button>
			<el-button type="danger" icon="el-icon-sort" size="mini" @click="toggleExpandAll" plain>展开</el-button>
		</div>

		<div>
			<el-table  v-if="refreshTable" :data="tableData"  row-key="departId" 
			style="width: 100%; margin-left: 0px;margin-top: 20px; "
				:default-expand-all="isExpandAll" :tree-props="{children: 'departList', hasChildren: 'hasChildren'}"
				highlight-current-row @current-change="handleCurrentRowChange">

				<el-table-column prop="departName" label="部门名称" ></el-table-column>
				<el-table-column prop="showOrder" label="排序" ></el-table-column>
				<el-table-column prop="departState" label="状态" >
					<template v-slot="scope">
						<div v-if="scope.row.departState == 0">
							<el-button size="mini" type="success" round>正常</el-button>
						</div>
						<div v-else="scope.row.departState == 1">
							<el-button size="mini" type="danger" round>停用</el-button>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" ></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleUpdate(scope.row)">编辑
						</el-button>
						<el-button size="mini" type="primary"  @click="handleAdd()">新增
						</el-button>
						<el-button size="mini" type="danger"  @click="handleDelete(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>


			<!-- 添加部门对话框 -->
			<el-dialog title="添加部门" :visible.sync="addFormVisible" width="600px" append-to-body>
				<el-form ref="addform" :model="addform" label-width="80px">
					<el-col :span="24">
						<div class="block">
							<el-form-item label="上级部门:" :label-width="'120px'" prop="pid" class="demonstration"
								required>
								<el-cascader :show-all-levels="false" :props="defaultparams" v-model="addform.pid"
									:options="deptOptions" filterable></el-cascader>
							</el-form-item>
						</div>
					</el-col>

					<el-col :span="24">
						<el-form-item label="部门名称" prop="departName" :label-width="'120px'">
							<el-input v-model="addform.departName" placeholder="请输入部门名称" />
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="显示排序" prop="showOrder" :label-width="'120px'">
							<el-input-number v-model="addform.showOrder" controls-position="right" :min="0" />
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="负责人" prop="departPrincipal" :label-width="'120px'">
							<el-input v-model="addform.departPrincipal" placeholder="请输入负责人" maxlength="20" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="联系电话" prop="departPhone" :label-width="'120px'">
							<el-input v-model="addform.departPhone" placeholder="请输入联系电话" maxlength="11" />
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="邮箱" prop="departEmail" :label-width="'120px'">
							<el-input v-model="addform.departEmail" placeholder="请输入邮箱" maxlength="50" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="部门状态" :label-width="'120px'">
							<template>
								<el-radio v-model="addform.departState" label="0">正常</el-radio>
								<el-radio v-model="addform.departState" label="1">停用</el-radio>
							</template>
						</el-form-item>
					</el-col>

				</el-form>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addSubmit()">确 定</el-button>
				</div>
			</el-dialog>
			
			
			<!-- 修改部门对话框 -->
			<el-dialog title="修改部门" :visible.sync="editFormVisible" width="600px" append-to-body>
				<el-form ref="addform" :model="addform" label-width="80px">
					<div class="block">
						<el-form-item label="上级部门:" :label-width="'120px'" prop="pid" class="demonstration" required>
							<el-cascader placeholder="试试搜索：部门" :show-all-levels="false" :props="defaultparams" readonly
								v-model="editform.pid" :options="deptOptions" filterable></el-cascader>
						</el-form-item>
					</div>
					<el-col :span="24">
						<el-form-item label="部门名称" prop="departName" :label-width="'120px'" required>
							<el-input v-model="editform.departName" placeholder="请输入部门名称" />
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="显示排序" prop="showOrder" :label-width="'120px'" required>
							<el-input-number v-model="editform.showOrder" controls-position="right" :min="0" />
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="负责人" prop="departPrincipal" :label-width="'120px'">
							<el-input v-model="editform.departPrincipal" placeholder="请输入负责人" maxlength="20" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="联系电话" prop="departPhone" :label-width="'120px'">
					 	<el-input v-model="editform.departPhone" placeholder="请输入联系电话" maxlength="11" />
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="邮箱" prop="departEmail" :label-width="'120px'">
							<el-input v-model="editform.departEmail" placeholder="请输入邮箱" maxlength="50" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="部门状态" :label-width="'120px'">
							<template>
								<el-radio v-model="editform.departState" label="0">正常</el-radio>
								<el-radio v-model="editform.departState" label="1">停用</el-radio>
							</template>
						</el-form-item>
					</el-col>

				</el-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click="editFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="editSubmit()">确 定</el-button>
				</div>
			</el-dialog>


		</div>
	</div>


</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				queryForm: {
					departId: '',
					departName: '',
					departState: ''
				},
				deptProps: {
					label: 'departName',
					value: 'departName',
					children: 'departList',
					emitPath: false,
					checkStrictly: true
				},
				
				// 表单参数
				addform: {
					createTime: null,
					departId: '',
					departName: '',
					showOrder: '',
					departState: '',
					pid: '',
					departPrincipal: '',
					departPhone: '',
					departEmail: '',
					departList: []
				},
				// 是否展开，默认全部展开
				isExpandAll: true,
				// 关闭弹窗
				addFormVisible: false,
				editFormVisible: false,
				data: [],
				defaultparams: {
					value: 'departId',
					label: 'departName',
					children: 'departList',
					checkStrictly: true
				},
				editform: {
					departId: '',
					departName: '',
					showOrder: '',
					departState: '',
					pid: '',
					departPrincipal: '',
					departPhone: '',
					departEmail: '',
					departList: []
				},
				// 重新渲染表格状态
				refreshTable: true,
				// 部门树选项
				deptOptions: [],
				// 是否显示弹出层
				open: false,
				butStatus:true,

			};
		},
		methods: {
			// 新增打开框
			handleAdd() {
				this.$nextTick(function(){
					this.$refs.addform.resetFields();
				})
				this.addFormVisible = true;
			},
			/** 新增提交按钮 */
			addSubmit(){
				this.addFormVisible=false;
				let a = '';
				if (this.addform.pid instanceof Array) {
					this.addform.pid.forEach(data => {
						a = data;
					})
					this.addform.pid = a;
				}
				this.$axios.post("/dept/add", this.addform).then(resp => {
					console.log(resp);
					if(resp.code==20000){
						this.$message.success(resp.msg);
					}else{
						this.$message.error("新增失败");
					}					  
					this.myQuery();
				})
			},
			editSubmit() {
				this.editFormVisible = false;
				this.$axios.put("/dept/edit", this.editform).then(resp => {
					if (resp.code == 20000) {
						this.$message.success(resp.msg);
					} else {
						this.$message.error("修改失败");
					}
					this.myQuery();
				})
			},
			//获取修改参数
			handleEdit() {
				this.editFormVisible = true;				
				this.$axios.get("/dept/byid/"+this.currentRow.departId)
				.then(resp=>{
					
						console.log(resp);
						this.editform = resp.data;
					
				})
			},
			//获取修改参数
			handleUpdate(row) {
				this.editFormVisible = true;
				this.editform = JSON.parse(JSON.stringify(row));
				
			},
			handleDelete(row) {
				this.$confirm(`此操作将永久删除名称为 ${row.departName} 的数据,, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
				this.$axios.delete(`/dept/delete/${row.departId}`).then(resp => {
							console.log(resp);
							this.myQuery();
						});
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			/** 展开/折叠操作 */
			toggleExpandAll() {
			  this.refreshTable = false;
			  this.isExpandAll = !this.isExpandAll;
			  this.$nextTick(() => {
			    this.refreshTable = true;
			  });
			},
			resetQuryForm() {
				this.queryForm = {
					departId: '',
					departName: '',
					showOrder: '',
					departState: '',
					pid: '',
					departPrincipal: '',
					departPhone: '',
					departEmail: '',
					departList: []
				}
			},
			// 重置
			resetForm() {
				this.resetQuryForm();
				this.myQuery()
			},
			/** 搜索按钮操作 */
			onQuerySubmit() {
				if (this.queryForm.id != null) {
					this.queryForm.id = null;
				}
				this.$axios.get("/dept/mhfy", {
					params: this.queryForm
				}).
				then(resp => {
					if (resp.code == 20000) {
						console.log(resp);
						this.tableData = resp.data;
					}
				})
			},
			// 查树形数据
			getSelectTableData(searchData) {
				this.$axios.get("/dept/tree", {
						params: searchData
					})
					.then(resp => {
						console.log(resp);
						this.tableData = resp.data;
					})
			},
			handleCurrentRowChange(val) {
				this.butStatus=false;
				this.currentRow= val;
			},

			myQuery() {
				this.$axios.get("/dept/tree").
				then(resp => {
					this.tableData = resp.data;
					this.deptOptions = resp.data;
				})
			}
		},
		mounted() {
			this.myQuery()

		}
	}
</script>

<style>

</style>
